<template>
  <div class="collection-container">
    <!-- <ul class="type-wrap clearfix" ref="typeWrap">
    </ul> -->
    <div  class="collection-content clearfix" :style="{'height':contentHeight+'px'}">
      <ul class="company-wrap " >
        <li class="company-item active clearfix">
          <span class="fl">全部</span>
          <img class="fr" src="./image/choose.png" alt="">
        </li>
        <li class="company-item"><span>川北公司</span></li>
        <li class="company-item"><span>川东公司</span></li><li class="company-item"><span>川北公司</span></li>
        <li class="company-item"><span>川东公司</span></li>
      </ul>
      <div  class="video-wrap clearfix" >
        <div class="prev ">
          <div class="img-wrap">  
            <img src="./image/prev.png" alt="">
          </div>
          <div class="tips">上一组</div>
        </div>
        <ul class="video-content clearfix screen4" :class="{'screen4':screenNum==4,'screen9':screenNum==9}">
          <li class="video-item" v-for="(item,index) in videoData" :key="index">
            <div class="video" @mouseenter="activeVideo = index" @mouseleave="activeVideo = -1">
              <video width="100%" height="100%" controls style="border:1px solid black;display:block;">
                <source src="movie.mp4" type="video/mp4">
                <source src="movie.ogg" type="video/ogg">
                您的浏览器不支持 video 标签。
              </video>
              <transition name="move">
                <div v-show="activeVideo == index" class="bottom" :key="index">
                  <span class="type">事故</span>
                  <span class="title">水电费水电费水电费</span>
                  <div class="handle-wrap">
                    <div class="collection">
                      <img src="./image/collection_on.png" alt="">
                      <!-- <img src="./image/collection.png" alt=""> -->
                    </div>
                    <img src="./image/full-screen.png" alt="">
                  </div>
                </div>
                
              </transition>
              <div v-show="activeVideo != index" class="type type-no">事故</div>
            </div>
          </li>
          
        </ul>
        <div class="next">
          <div class="img-wrap">  
            <img src="./image/next.png" alt="">
          </div>
          <div class="tips">下一组</div>
        </div>
      </div>
      <div class="empty-content" style="display:none;" >
        <img src="./image/empty_collection.png" alt="">
        <div class="tips">抱歉，您暂未收藏相关视频</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    
    return {
      contentHeight:0,
      show:false,
      activeVideo:-1,
      typeData:[
        {active:true,label:'全部',num:14,urlOn:require('../../assets/typeImage/type_on0.png'),url:require('../../assets/typeImage/type0.png')},
        {active:false,label:'事故',num:14,urlOn:require('../../assets/typeImage/type_on0.png'),url:require('../../assets/typeImage/type0.png')}
      ],
      videoData:[
        {type:'事故',title:'标题1',url:''},
        {type:'事故',title:'标题1',url:''},
        {type:'事故',title:'标题1',url:''},
        {type:'事故',title:'标题1',url:''},
        
      ]
    }
  },
  mounted() {
    this.contentHeight = document.documentElement.clientHeight- 80
    // console.log(this.contentHeight)
  },
  computed: {
    screenNum() {
      return this.$store.state.screenNum
    }
  },
  methods: {
    mouseenter() {
      console.log('lll')
      this.show = true
    },
    mouseleave() {
      this.show = false
    }
  }
};
</script>

<style scoped lang="less" >
.collection-container {
  .move-enter-active, 
  .move-leave-active {
      transition: all .3s;
  }

  .move-enter,
  .move-leave-to{
      transform: translate3d(0px, 72px, 0);
  }
  .collection-content {
    padding:20px;
    box-sizing: border-box;
    border:1px solid red;
    position: relative;
    display:flex;
    .company-wrap {
      background:#F0F3F5;
      // padding:20px;
      padding:20px 0;
      box-sizing: border-box;
      border-radius: 4px;
      width:170px;
      overflow: scroll;
      flex-shrink: 0;
      .company-item {
        margin:0 auto;
        width:138px;
        height:32px;
        line-height:32px;
        cursor: pointer;
        color:#585D67;
        border-radius: 6px;
        font-size:14px;
        padding:0 15px;
        box-sizing: border-box;
        img {
          margin-top:11px;
        }
        &.active {
          background:#57AADE;
          color:#fff;
        }
        &.active:hover {
          background:#57AADE;
          color:#fff;
        }
      }
      .company-item:hover {
        background:#E1E8ED;
        color:#000;
      }
    }
    .video-wrap {
      padding:0 20px;
      position: relative;
      display:flex;
      align-items: center;
      align-self:flex-start;
      justify-content: space-between;
      flex:1;
      .prev,.next {
        cursor: pointer;
        height:150px;
        text-align: center;
        .img-wrap {
          width:60px;
          height:120px;
          background:#B3B3B3;
          border-radius: 8px;
          text-align: center;
          vertical-align: middle;
          img {
            margin-top:46px;
          }
        }
        .tips {
          font-size:16px;
          color:#B3B3B3;
          margin-top:6px;
        }
        
      }
      .prev {
      }
      .next {
        right:20px;
      }
      .video-content {
        margin:0 auto;
        border:1px solid red;
        display:flex;
        width:80%;
        max-width:1200px;
        flex-shrink:0;
        flex-wrap: wrap;
        // justify-content: center;
        .video-item {
          width:50%;
          max-width:200px;
          flex-shrink:0;
          box-sizing: border-box;
          border-radius: 4px;
          box-sizing: border-box;
          position: relative;
          padding:10px;
          .type {
            font-size:15px;
            margin-right:12px;
            width:52px;
            height:28px;
            text-align: center;
            line-height:28px;
            background:rgba(255,255,255,.2);
            border-radius:4px;
            &.type-no {
              background:rgba(0,0,0,.6);
              z-index:100;
              color:#fff;
              position: absolute;
              left:20px;
              bottom:22px;
            }
          }
          .video {
            position: relative;
            border-radius: 4px;
            overflow: hidden;
            cursor: pointer;
            .bottom {
              position: absolute;
              width:100%;
              bottom:0;
              height:72px;
              background: -webkit-linear-gradient(transparent, #000); /* Safari 5.1 - 6.0 */
              background: -o-linear-gradient(transparent, #000); /* Opera 11.1 - 12.0 */
              background: -moz-linear-gradient(transparent, #000); /* Firefox 3.6 - 15 */
              background: linear-gradient(transparent, #000); /* 标准的语法 */
              // background:red;
              display:flex;
              justify-content: space-between;
              align-items: center;

              color:#fff;
              padding:0 20px;
              box-sizing: border-box;
              .title {
                font-size: 16px;
                overflow: hidden;/*超出部分隐藏*/
                text-overflow:ellipsis;/* 超出部分显示省略号 */
                white-space: nowrap;/*规定段落中的文本不进行换行 */
              }
              .handle-wrap {
                display:flex;
                align-items: center;
                img {
                  cursor: pointer;
                }
              }
            }
          }
          
        }
        &.screen4 {
          .video-item {
            width:50%;
            max-width:500px;
          }
        }
        &.screen9 {
          .video-item {
            width:33.33%;
            padding:5px;
            max-width:338px;
          }
        }
      }
    }
    .empty-content {
      display:flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width:100%;
      .tips {
        font-size:24px;
        color:#C2C7D2;
        margin-top:15px;
      }
    }
  }
}
</style>
